{extend name="template/base" /}
{block name="content"}
<!--select2样式 start -->
<link href="__LIB__/select2-4.0.3/dist/css/select2.min.css" rel="stylesheet" />
<!--select2样式 end -->
<link rel="stylesheet" href="/static/admin/layui-xia/css/layui.css" media="all"/>
<link rel="stylesheet" href="/static/admin/formSelects/dist/formSelects-v4.css">
<script type="text/javascript" src="/static/admin/layui-xia/layui.js"></script>
<div class="page-container">
    {php} use think\Db; {/php}
    <br><br><br>
    <form class="form form-horizontal" id="form" onsubmit="return false" method="post" action="###">
        <input type="hidden" name="groupIds" id="groupIds" value="">
        <input type="hidden" name="oid" id="oid" value="{$Request.param.oid}">
        <table class="table table-border table-bordered">
            <tr>
                <th style="text-align: center;width: 30px"></th>
                <th style="text-align: center">线路名称</th>
                <th style="text-align: center">姓名</th>
                <th style="text-align: center">性别</th>
                <th style="text-align: center">年龄</th>
                <th style="text-align: center">电话</th>
                <th style="text-align: center">身份证号</th>
                <th style="text-align: center">客人数量</th>
                <th style="text-align: center">住宿</th>
                <th style="text-align: center">住宿备注</th>
            </tr>
            <!--使用ajax刷新-->
            {foreach $info as $vo}
            <tr>
                <input type="hidden" name="group_id[]" value="{$vo.group_id}">
                <td  style="text-align: center"><input class="user_id" type="checkbox" name="user_id[]" value="{$vo.id}"></td>
                <td style="text-align: center">{$vo.route_name ?? ''}</td>
                <td style="text-align: center">{$vo.name ?? ''}</td>
                <td style="text-align: center">{$vo.sex ?? ''}</td>
                <td style="text-align: center">{$vo.age ?? ''}</td>
                <td style="text-align: center">{$vo.phone ?? ''}</td>
                <td style="text-align: center">{$vo.id_card ?? ''}</td>
                <td style="text-align: center">{$count ?? ''}</td>
                <td style="text-align: center">{$vo.isaccommodation ?? ''}</td>
                <td style="text-align: center">{$vo.remark ?? ''}</td>
            </tr>
            {/foreach}
            <tr>
                <td colspan="7" style="text-align: center">
                    <input class="btn btn-primary size-M radius" type="submit" id="add_group1" value="确认组合" onclick="submitGroup()">
                </td>
            </tr>
        </table>
    </form>

    <!--分配住宿-->
    <form class="form form-horizontal" id="form1" onsubmit="return false" method="post" action="###">
        <input type="hidden" name="order" value="{$order}">
        <input type="hidden" name="oid" id="oid" value="{$Request.param.oid}">
        <input type="hidden" name="isdeal" id="isdeal" value="{$Request.param.isdeal}">
        <input type="hidden" name="isbooking" id="isbooking" value="{$Request.param.isbooking}">
        <table class="table table-border table-bordered">
            <tr>
                <th style="text-align: center">线路名称</th>
                <th style="text-align: center">组合姓名</th>
                <th style="text-align: center">住宿备注</th>
                <th style="text-align: center">入住日期</th>
                <!--<th style="text-align: center">退房日期</th>-->
                <th style="text-align: center">酒店名称</th>
                <th style="text-align: center">酒店房型</th>
                <th style="text-align: center">价格(元)</th>
                <th style="text-align: center">操作</th>
            </tr>
            <!--使用ajax刷新-->
            <tr>
                <td colspan="8" style="text-align: center">
                    <input class="btn btn-primary size-M radius" id="btn01" type="submit" value="拼房完成" onclick="submitTraveller()">
                </td>
            </tr>
        </table>
    </form>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIB__/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="__LIB__/My97DatePicker/WdatePicker.js"></script>
<!--select2 js 插件-->
<script type="text/javascript" src="__LIB__/select2-4.0.3/dist/js/select2.min.js"></script>
<style>
    element .style {
        width: 100px;
    }
    .shang{
        position: relative;
        top: -2px;
    }
    .jian{
        position: relative;
        top: 2px;
    }
</style>
<script>
    /*
** 时间戳转换成指定格式日期
** eg.
** dateFormat(11111111111111, 'Y年m月d日 H时i分')
** → "2322年02月06日 03时45分"
*/
    var dateFormat = function (timestamp, formats) {
        // formats格式包括
        // 1. Y-m-d
        // 2. Y-m-d H:i:s
        // 3. Y年m月d日
        // 4. Y年m月d日 H时i分
        formats = formats || 'Y-m-d';

        var zero = function (value) {
            if (value < 10) {
                return '0' + value;
            }
            return value;
        };

        var myDate = timestamp? new Date(timestamp): new Date();

        var year = myDate.getFullYear();
        var month = zero(myDate.getMonth() + 1);
        var day = zero(myDate.getDate());

        var hour = zero(myDate.getHours());
        var minite = zero(myDate.getMinutes());
        var second = zero(myDate.getSeconds());

        return formats.replace(/Y|m|d|H|i|s/ig, function (matches) {
            return ({
                Y: year,
                m: month,
                d: day,
                H: hour,
                i: minite,
                s: second
            })[matches];
        });
    };
    $(function () {

        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });


        //room_type


        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //常规用法
            laydate.render({
                elem: '#test1'
            });
        })
        var route_name="{$route_name}";

        var hotel_accommodations={:json_encode($hotel_accommodations)};
        for (var n=0;n< hotel_accommodations.length;n++){
            // 添加合并后的旅客的数据
            var trLength = $('#form1 tr').length; // 获取#allot下有几个tr
            // 随机字符串
            var str = 'a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z|1|2|3|4|5|6|7|8|9'
            // 获取打乱的字符串数组
            var strArr = str.split('|').sort(function () {
                return Math.random() - 0.5
            });
            var randomStr = '';
            if (!randomStr) {
                for (var i = 0; i < 5; i++) {
                    randomStr += strArr[i] + ''
                }
            }
            randomStr = randomStr + (trLength + 1); // 作为房型的id
            console.log('randomStr', randomStr)
            var hotel_room_type_id = 'room_type' + randomStr;
            var hotel_ids = 'hotel' + randomStr;
            // 删除表的最后一行tr
            $("#form1").find("tr:last").remove();
            // 获取酒店的列表
            var id = hotel_accommodations[n].order_travel_ids;
            console.log('id数组', id.split(','));
            id = id.split(',');
            var idLen = id.length;
            var idStr = '';
            if (idLen) {
                for (var i = 0;i < idLen;i++){
                    if (idStr){
                        idStr = parseInt(idStr) + parseInt(id[i]);
                    }else{
                        idStr = id[i];
                    }
                }
            }
            var passengerId = "#" + idStr + 'lvke' + GenNonDuplicateID(6);
            console.log('获取随机的id', dateFormat(hotel_accommodations[n].check_in_date*1000));
            var my_id=hotel_accommodations[n].id;
            if(!my_id){
                my_id=0;
            }

            // 添加行
            $("#form1 tbody").append('<tr id="'+passengerId+'"><input type="hidden" name="id[]" value="' +my_id+ '">' +
                '<input type="hidden" name="order_travel_ids[]" value="' + hotel_accommodations[n].order_travel_ids + '">' +
                '<td style="text-align: center">' +route_name + '</td>' +
                '<td style="text-align: center">' + hotel_accommodations[n].name_of_passenger + '</td>' +
                '<td style="text-align: center">' + hotel_accommodations[n].remark + '</td>' +
                '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:250px" autocomplete="off" placeholder="入住日期" name="check_in_date[]" value="'+dateFormat(hotel_accommodations[n].check_in_date*1000)+'" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                // '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:250px" autocomplete="off" placeholder="退房日期" name="end_date[]" value="{$Request.param.end_date}" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                '<td style="text-align: center;width: 180px">' +
                '<select name="hotel_id[]" class="select2 hotel_id" id="' + hotel_ids + '" onchange="get_hotel_room_type_list(this[selectedIndex].value,' + hotel_room_type_id + ','+hotel_accommodations[n].hotel_room_type+')">' +
                '<option value="">选择酒店</option>' +
                '</select>' +
                '</td>' +
                '<td style="text-align: center;width: 180px"">' +
                '<select name="room_type_id[]" class="select2 room_type" id="' + hotel_room_type_id + '" >' +
                '<option value="">选择房型</option>' +
                '</select>' +
                '</td>' +
                '<td style="text-align: center"><input type="text" class="input-text" style="width:250px" autocomplete="off" placeholder="价格" name="unit_price[]" value="' +hotel_accommodations[n].unit_price + '"></td>' +
                '<td style="text-align: center;">' +
                '<a href="javascript:;" onclick="ungroup(this, \''+hotel_accommodations[n].order_travel_ids+'\')" class="btn btn-warning radius \tsize-MINI mr-5 shang"><i class="Hui-iconfont">&#xe631;</i> 取消组合</a>' +
                '<a href="javascript:;" onclick="increase(this, \''+hotel_accommodations[n].order_travel_ids+'\',\''+passengerId+'\')" class="btn btn-primary radius \tsize-MINI mr-5"><i class="Hui-iconfont">&#xe604;</i> 添加</a>' +
                '</td>' +
                '</tr>');
            // 追加酒店列表
            var hotelData = {:json_encode($hotel)};
            var hotelLen = hotelData.length;
            console.log('长度', hotelLen)
            if (hotelLen) {
                for (var hi = 0; hi < hotelLen; hi++) {
                    $('#' + hotel_ids).append('<option value="' + hotelData[hi].id + '">' + hotelData[hi].hotel_name + '</option>');
                }
            }
            // 把最后一行添加回来
            $('#form1 tbody').append('<tr style="text-align: center"><td colspan="8" style="text-align: center">' +
                '<input class="btn btn-primary size-M radius" id="btn01" type="submit" value="拼房完成" onclick="submitTraveller()">' +
                '</td>' +
                '</tr>');
            //
            $('#'+hotel_ids).select2({
                language: "zh-CN", //设置 提示语言
                width: "100%", //设置下拉框的宽度
                theme: "classic"
            });
            $('#'+hotel_room_type_id).select2({
                language: "zh-CN", //设置 提示语言
                width: "100%", //设置下拉框的宽度
                theme: "classic"
            });
            $('#'+hotel_ids).val(hotel_accommodations[n].hotel_id).trigger("change");
        }
    });
    // var index = parent.layer.getFrameIndex(window.name)
    // 获取酒店房型
    function get_hotel_room_type_list(val, room_type,room_type_id=0) {
        // console.log('你选择的是：', val)
        // console.log('获取的房型的类：', room_type);
        // console.log('获取的房型的类：', room_type.id);
        var id = '#' + room_type.id;
        if (room_type.length > 20) {
            room_type = id
        }
        var type_id = '#' + '' + room_type;
        // console.log('type_id', type_id)
        // console.log('room_type', id)
        // 清空房型
        $(id).empty()
        // 获取酒店的房型‘
        $.ajax({
            type: 'post',
            url: '/admin/portion_traveler/getRoomType',
            data: {hotel_id: val},
            success: function (ret) {
                console.log('结果是', ret)
                if (ret.code == 1) {
                    layer.msg(ret.msg)
                } else if (ret.code == 5) {
                    // 获取数据成功
                    var data = ret.data;
                    var len = data.length
                    if (!len) {
                        // 没有房型
                        layer.msg('该酒店还没有添加房型')
                    } else {
                        for (var i = 0; i < len; i++) {
                            $(id).append("<option value='" + data[i].room_type_id + "'>" + data[i].room_type_name + "</option>")
                            if(room_type_id==0){
                                $(id + ' option:eq(0)').attr('selected', 'selected');//选中第一个
                            }else{
                                $(id).val(room_type_id).trigger("change");
                            }
                        }
                    }
                }
            }
        });
    }

    // 取消组合
    function ungroup(obj,val) {
        console.log('取消组合', val)
        console.log('当前对象', obj)
        // 获取取消的tr
        var trClass = $(obj).parent().parent().attr('id');
        // 把当前组合删除
        $(obj).parent().parent().remove();
        // 把添加的子行删除
        console.log('类为：', trClass)
        var trClassArr = trClass.split('');
        trClass = trClassArr.slice(1);
        trClass = trClass.join('');
        $('.' + trClass).remove();
    }
    function price(obj,val) {
        console.log('取消组合', val)
        console.log('当前对象', obj)
        // 获取取消的tr
        var tr = $(obj).parent().parent();
        console.log(tr.serializeArray());
    }
    // 提交旅客住宿信息表单
    function submitTraveller() {
        console.log('你提交的数据', $('#form1').serializeArray())
        var data = $('#form1').serialize()
        $('#btn01').attr('disabled',true);
        $.ajax({
            type: 'post',
            url: '/admin/portion_traveler/addTraveller',
            data: data,
            success: function (ret) {
                console.log('提交的数据', ret);
                if (ret.code) {
                    layer.msg(ret.msg)
                    $('#btn01').attr('disabled',false);
                    return false;
                }else{
                    layer.msg(ret.msg);
                    // close('yes');
                    var index = parent.layer.getFrameIndex(window.name); // 获取当前弹出层的层级
                    window.parent.location.reload(); // 刷新父页面
                    parent.layer.close(index); // 关闭弹窗页
                }
            }
        })
    }

    // 确认组合
    function submitGroup() {
        console.log('选择的组合数据是：', $('#form').find("input[name='user_id[]']").serializeArray())
        var data = $('#form').serializeArray();
        // 按钮变灰
        // $('#add_group1').attr('disabled','true');
        // 提交数据
        $.ajax({
            type: 'post',
            url: '/admin/portion_traveler/addGroup',
            data: data,
            success: function (ret) {
                console.log('提交的结果', ret)
                if (ret.code == 5) {
                    layer.msg('组合成功');
                    console.log('组合的数据', ret.data.group.route_id)
                    console.log('酒店的数据', ret.data.hotel)
                    if (ret.data.group) {
                        // 添加合并后的旅客的数据
                        var trLength = $('#form1 tr').length; // 获取#allot下有几个tr
                        // 随机字符串
                        var str = 'a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z|1|2|3|4|5|6|7|8|9'
                        // 获取打乱的字符串数组
                        var strArr = str.split('|').sort(function () {
                            return Math.random() - 0.5
                        });
                        var randomStr = '';
                        if (!randomStr) {
                            for (var i = 0; i < 5; i++) {
                                randomStr += strArr[i] + ''
                            }
                        }
                        randomStr = randomStr + (trLength + 1); // 作为房型的id
                        console.log('randomStr', randomStr)
                        var hotel_room_type_id = 'room_type' + randomStr;
                        var hotel_ids = 'hotel' + randomStr;
                        // 删除表的最后一行tr
                        $("#form1").find("tr:last").remove();
                        // 获取酒店的列表
                        var id = ret.data.group.order_travel_ids;
                        console.log('id数组', id.split(','));
                        id = id.split(',');
                        var idLen = id.length;
                        var idStr = '';
                        if (idLen) {
                            for (var i = 0;i < idLen;i++){
                                if (idStr){
                                    idStr = parseInt(idStr) + parseInt(id[i]);
                                }else{
                                    idStr = id[i];
                                }
                            }
                        }
                        var passengerId = "#" + idStr + 'lvke' + GenNonDuplicateID(6);
                        console.log('获取随机的id', passengerId)
                        // 添加行
                        $("#form1 tbody").append('<tr id="'+passengerId+'"><input type="hidden" name="id[]" value="0">' +
                            '<input type="hidden" name="order_travel_ids[]" value="' + ret.data.group.order_travel_ids + '">' +
                            '<td style="text-align: center">' + ret.data.group.route_id + '</td>' +
                            '<td style="text-align: center">' + ret.data.group.combine_name + '</td>' +
                            '<td style="text-align: center">' + ret.data.group.remark + '</td>' +
                            '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:250px" autocomplete="off" placeholder="入住日期" name="check_in_date[]" value="{$Request.param.check_in_date}" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                            // '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:250px" autocomplete="off" placeholder="退房日期" name="end_date[]" value="{$Request.param.end_date}" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                            '<td style="text-align: center;width: 180px">' +
                            '<select name="hotel_id[]" class="select2 hotel_id" id="' + hotel_ids + '" onchange="get_hotel_room_type_list(this[selectedIndex].value,' + hotel_room_type_id + ')">' +
                            '<option value="">选择酒店</option>' +
                            '</select>' +
                            '</td>' +
                            '<td style="text-align: center;width: 180px"">' +
                            '<select name="room_type_id[]" class="select2 room_type" id="' + hotel_room_type_id + '" >' +
                            '<option value="">选择房型</option>' +
                            '</select>' +
                            '</td>' +
                            '<td style="text-align: center"><input type="text" class="input-text" style="width:250px" autocomplete="off" placeholder="价格" name="unit_price[]" value=""></td>' +
                            '<td style="text-align: center;">' +
                            '<a href="javascript:;" onclick="ungroup(this, \''+ret.data.group.order_travel_ids+'\')" class="btn btn-warning radius \tsize-MINI mr-5 shang"><i class="Hui-iconfont">&#xe631;</i> 取消组合</a>' +
                            '<a href="javascript:;" onclick="increase(this, \''+ret.data.group.order_travel_ids+'\',\''+passengerId+'\')" class="btn btn-primary radius \tsize-MINI mr-5"><i class="Hui-iconfont">&#xe604;</i> 添加</a>' +
                            '</td>' +
                            '</tr>');
                        // 追加酒店列表
                        var hotelData = ret.data.hotel;
                        var hotelLen = hotelData.length;
                        console.log('长度', hotelLen)
                        if (hotelLen) {
                            for (var hi = 0; hi < hotelLen; hi++) {
                                $('#' + hotel_ids).append('<option value="' + hotelData[hi].id + '">' + hotelData[hi].hotel_name + '</option>');
                            }
                        }
                        // 把最后一行添加回来
                        $('#form1 tbody').append('<tr style="text-align: center"><td colspan="8" style="text-align: center">' +
                            '<input class="btn btn-primary size-M radius" id="btn01" type="submit" value="拼房完成" onclick="submitTraveller()">' +
                            '</td>' +
                            '</tr>');
                        //
                        $('#'+hotel_ids).select2({
                            language: "zh-CN", //设置 提示语言
                            width: "100%", //设置下拉框的宽度
                            theme: "classic"
                        });
                        $('#'+hotel_room_type_id).select2({
                            language: "zh-CN", //设置 提示语言
                            width: "100%", //设置下拉框的宽度
                            theme: "classic"
                        });
                        // 获取已经组合的旅客id
                        var groupIds = $('#groupIds').val();
                        console.log('旅客的组合id', groupIds)
                        if (!groupIds){ // 不存在旅客的id
                            $('#groupIds').val(ret.data.group.order_travel_ids);
                        } else { // 已经有旅客组合
                            groupIds = groupIds + ',' + ret.data.group.order_travel_ids ;
                            $('#groupIds').val(groupIds);
                        }
                        // // 把form中选择的旅客列表
                        // console.log('旅客信息', ret.data.info)
                        // var travelerLen = ret.data.info.length
                        // console.log('dddd', travelerLen)
                        // // 删除（第一个）的其他的tr元素
                        // $('#form tr').remove();
                        // if(travelerLen) {
                        //     // 添加表头
                        //     $("#form tbody").prepend('<tr><th style="text-align: center;width: 30px"></th>' +
                        //         '<th style="text-align: center">线路名称</th>' +
                        //         '<th style="text-align: center">姓名</th>' +
                        //         '<th style="text-align: center">性别</th>' +
                        //         '<th style="text-align: center">年龄</th>' +
                        //         '<th style="text-align: center">电话</th>' +
                        //         '<th style="text-align: center">身份证号</th>' +
                        //         '<th style="text-align: center">客人数量</th>' +
                        //         '<th style="text-align: center">住宿</th>' +
                        //         '<th style="text-align: center">住宿备注</th></tr>');
                        //     // 添加旅客
                        //     for (var j = 0; j < travelerLen; j++) {
                        //         $('#form tbody').append('<tr>' +
                        //             '<input type="hidden" name="group_id[]" value="'+ret.data.info[j].group_id+'">' +
                        //             '<td  style="text-align: center"><input type="checkbox" name="user_id[]" value="'+ret.data.info[j].id+'"></td>' +
                        //             '<td style="text-align: center">'+ret.data.info[j].route_name+'</td>' +
                        //             '<td style="text-align: center">'+ret.data.info[j].name+'</td>' +
                        //             '<td style="text-align: center">'+ret.data.info[j].sex+'</td>' +
                        //             '<td style="text-align: center">'+ret.data.info[j].age+'</td>' +
                        //             '<td style="text-align: center">'+ret.data.info[j].phone+'</td>' +
                        //             '<td style="text-align: center">'+ret.data.info[j].id_card+'</td>' +
                        //             '<td style="text-align: center">'+ret.data.count+'</td>' +
                        //             '<td style="text-align: center">'+ret.data.info[j].isaccommodation+'</td>' +
                        //             '<td style="text-align: center">'+ret.data.info[j].remark+'</td>' +
                        //             '</tr>');
                        //     }
                        //     // 最后把确认组合按钮添加回去
                        //     $('#form tbody').append('<tr>' +
                        //         '<td colspan="7" style="text-align: center">' +
                        //         '<input class="btn btn-primary size-M radius" type="submit"  id="add_group1" value="确认组合" onclick="submitGroup()">' +
                        //         '</td>' +
                        //         '</tr>');
                        // }
                    }
                }else if(ret.code == 1){
                    // console.log('结果', ret)
                    $('#add_group1').attr('disabled', false);
                    layer.msg(ret.msg);
                }
            }
        });
        // setTimeout("$('#add_group1').remove('disabled')",5000); // 5秒后恢复显示
    }
</script>

<script>
    /**
     * 生成一个用不重复的ID
     */
    function GenNonDuplicateID(randomLength){
        return Number(Math.random().toString().substr(3,randomLength) + Date.now()).toString(36)
    }
    //GenNonDuplicateID()将生成 rfmipbs8ag0kgkcogc 类似的ID
    // console.log('随机字符串', GenNonDuplicateID(6));
</script>


<script>
    // 增加
    function increase(obj, val, trId) {
        // console.log('增加obj', obj);
        // console.log('增加val', val);
        // console.log('选择的trid', trId);
        var classTrId = trId;
        if (!val) {
            layer.msg('缺少必要的参数!');
        }
        $.ajax({
            type: 'POST',
            url: '/admin/portion_traveler/getTravellerInfo',
            data: {id: val},
            success: function (ret) {
                if (ret.code == 1){
                    layer.msg(ret.msg);
                    return false;
                }else{
                    layer.msg(ret.msg);
                    console.log('接收到的结果：', ret);
                    var orderTraveler = ret.data.orderTraveler; // 获取旅客数据
                    // 追加行，即是可以添加多几天的住宿情况
                    if (orderTraveler){
                        $.each($('#form1 tbody tr'), function (i, tr) {
                            if ($(this).attr('id') == classTrId) {
                                var classIds = classTrId.split('');
                                classIds = classIds.slice(1);
                                classIds = classIds.join('');
                                var class_name = '.'+ classIds;

                                // 获取当前行

                                var currentRow2 =  $(class_name);
                                if(currentRow2.length>0){
                                    var currentRow = $("tr[class="+classIds+"]:last");
                                }else{
                                    var currentRow = $('#form1 tbody tr:eq('+i+')');
                                }
                                console.log('currentRow',currentRow);
                                console.log('currentRow2',currentRow2);
//                                return false;

                                // 要添加行的id
                                var addId = GenNonDuplicateID(6);
                                var id = '#' + addId;
                                var hotelIds = 'hotel_id'+ addId;
                                var hotelRoomType = 'room_type' + addId;
//                                var classIds = classTrId.split('');
//                                classIds = classIds.slice(1);
//                                classIds = classIds.join('');
                                currentRow.after('<tr id="'+id+'" class="'+classIds+'"><input type="hidden" name="id[]" value="0"/>' +
                                    '<input type="hidden" name="order_travel_ids[]" value="'+orderTraveler.order_travel_ids+'"/>' +
                                    '<td style="text-align: center">'+orderTraveler.routeName+'</td>' +
                                    '<td style="text-align: center">'+orderTraveler.userName+'</td>' +
                                    '<td style="text-align: center">'+orderTraveler.remark+'</td>' +
                                    '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:250px" autocomplete="off" placeholder="入住日期" name="check_in_date[]" value="{$Request.param.check_in_date}" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                                    // '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:250px" autocomplete="off" placeholder="退房日期" name="end_date[]" value="{$Request.param.end_date}" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                                    '<td style="text-align: center;width: 180px">' +
                                    '<select name="hotel_id[]" class="select2 hotel_id" id="' + hotelIds + '" onchange="getRoomTypeList(this[selectedIndex].value, \''+hotelRoomType+'\')">' +
                                    '<option value="">选择酒店</option>' +
                                    '</select>' +
                                    '</td>' +
                                    '<td style="text-align: center;width: 180px">' +
                                    '<select name="room_type_id[]" class="select2 room_type" id="' + hotelRoomType + '">' +
                                    '<option value="">选择房型</option>' +
                                    '</select>' +
                                    '</td>' +
                                    '<td style="text-align: center"><input type="text" class="input-text" style="width:250px" autocomplete="off" placeholder="价格" name="unit_price[]" value=""></td>' +
                                    '<td style="text-align: center">' +
                                    '<a href="javascript:;" onclick="reduce(this)" class="btn btn-secondary  radius \tsize-MINI mr-5"><i class="Hui-iconfont">&#xe6a1;</i> 减少</a>' +
                                    '</td>' +
                                    '</tr>');
                            }
                            // 追加酒店列表
                            var hotelData = ret.data.hotel;
                            var hotelLen = hotelData.length;
                            if (hotelLen) {
                                for (var hi = 0; hi < hotelLen; hi++) {
                                    $('#' + hotelIds).append('<option value="' + hotelData[hi].id + '">' + hotelData[hi].hotel_name + '</option>');
                                }
                            }
                            $('#' + hotelIds).select2({
                                language: "zh-CN", //设置 提示语言
                                width: "100%", //设置下拉框的宽度
                                theme: "classic"
                            });
                            $('#' + hotelRoomType).select2({
                                language: "zh-CN", //设置 提示语言
                                width: "100%", //设置下拉框的宽度
                                theme: "classic"
                            });
                        });
                    }
                }
            }
        });
    }

    // 减少
    function reduce(obj) {
        layer.confirm('确定要删除当前分组?', {
            btn: ['确定','取消']
        }, function (index) {
            layer.close(index); // 关闭当前弹窗
            $(obj).parent().parent().remove(); // 删除当前行
        },function () {
            layer.msg('取消成功!');
        });
    }
</script>


<script>
    // 获取房型
    function getRoomTypeList(val, room_type_id) {
        if (!val){
            layer.msg('缺少必要参数');
            return false;
        }
        if (!room_type_id) {
            layer.msg('缺少房型');
            return false;
        }
        var id = room_type_id;
        // 清空房型
        $('#' + id).empty();
        // 获取酒店的房型‘
        $.ajax({
            type: 'post',
            url: '/admin/portion_traveler/getRoomType',
            data: {hotel_id: val},
            success: function (ret) {
                // console.log('结果是', ret)
                if (ret.code == 1) {
                    layer.msg(ret.msg)
                } else if (ret.code == 5) {
                    // 获取数据成功
                    var data = ret.data;
                    var len = data.length
                    if (!len) {
                        // 没有房型
                        layer.msg('该酒店还没有添加房型')
                    } else {
                        for (var i = 0; i < len; i++) {
                            $('#' + id).append("<option value='" + data[i].room_type_id + "'>" + data[i].room_type_name + "</option>")
                            $('#' + id + ' option:eq(0)').attr('selected', 'selected');//选中第一个
                        }
                    }
                }
            }
        });
    }
</script>


<script>

    //用户select2 js部分 end
    //用户select2 js部分 car_type_id
    var hotel_id = $(".hotel_id").select2({
        language: "zh-CN", //设置 提示语言
        width: "100%", //设置下拉框的宽度
        theme: "classic"
    });
    {notempty name = "vo['hotel_id']"}
    hotel_id.val("{$vo['hotel_id']}").trigger("change");
    {/notempty}
        //用户select2 js部分 end
        //用户select2 js部分 car_type_id
        var room_type = $(".room_type").select2({
            language: "zh-CN", //设置 提示语言
            width: "100%", //设置下拉框的宽度
            theme: "classic"
        });
        {notempty name = "vo['room_type_id']"}
        room_type.val("{$vo['room_type_id']}").trigger("change");
        {/notempty}
    //用户select2 js部分 end



</script>


{/block}
